<template>
  <div class="app-container">
    <div class="head-container">
      <div>
        <!-- 搜索 -->
        <el-input
          v-model="query.code"
          size="small"
          clearable
          placeholder="计划单号"
          class="filter-item"
          style="width: 200px;"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.name"
          size="small"
          clearable
          placeholder="计划名称"
          class="filter-item"
          style="width: 200px;"
          @keyup.enter.native="crud.toQuery"
        />
        <el-input
          v-model="query.createBy"
          size="small"
          clearable
          placeholder="创建人"
          class="filter-item"
          style="width: 200px;"
          @keyup.enter.native="crud.toQuery"
        />
        <el-select class="filter-item" style="width: 200px;" v-model="query.status">
          <el-option
            v-for="(status, index) in dict.plan_status"
            :key="index"
            :label="status.label"
            :value="status.value"
          ></el-option>
        </el-select>
        <!-- TODO: 增加品类搜索 -->
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
        <span slot="right" v-if="!isSelectionMode">
          <el-button
            type="warning"
            :disabled="crud.selections.length !== 1"
            class="filter-item"
            icon="el-icon-document-copy"
            @click="copyPlan"
          >
            复制计划
          </el-button>
          <el-button
            type="success"
            :disabled="crud.selections.length === 0"
            class="filter-item"
            icon="el-icon-plus"
            @click="addNewProject"
          >
            新增招标
          </el-button>
        </span>
        <span slot="right" v-else>
          <el-button
            type="primary"
            :disabled="crud.selections.length === 0"
            class="filter-item"
            icon="el-icon-plus"
            @click="addPlans"
          >
            增加计划到项目
          </el-button>
        </span>
      </crudOperation>
    </div>
    <el-row :gutter="15">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">计划列表</span>
          </div>
          <el-table
            ref="table"
            v-loading="crud.loading"
            highlight-current-row
            style="width: 100%;"
            :data="crud.data"
            @selection-change="crud.selectionChangeHandler"
          >
            <el-table-column type="selection"></el-table-column>
            <el-table-column type="index" label="序号" />
            <el-table-column prop="code" label="计划单号" width="140" />
            <el-table-column prop="name" label="计划名称" min-width="150" width="200" />
            <el-table-column prop="detail.materialName" label="物料名称" width="200" />
            <el-table-column prop="detail.amount" label="物料数量" width="100px" />

            <el-table-column prop="status" label="计划状态">
              <template slot-scope="scope">
                <span>
                  {{ dict.label.plan_status[scope.row.status] }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="stock" label="计划品类">
              <!-- TODO: 加回来 -->
              <!-- <template slot-scope="scope">
                <span>
                  {{ STOCKS_FORMAT(scope.row.stock) }}
                </span>
              </template> -->
            </el-table-column>
            <el-table-column prop="createBy" label="计划创建人" width="100" />
            <el-table-column prop="detail.stockManager" label="品类经理" width="100" />
            <el-table-column prop="detail.budget" label="预算" width="100px" />
            <el-table-column prop="detail.proposer" label="申请人" width="100px" />
            <el-table-column prop="detail.proposerPhone" label="申请人手机" width="100px" />
            <el-table-column prop="detail.proposerDept" label="申请人部门" width="100px" />
            <el-table-column prop="createTime" label="创建日期" width="150px">
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <pagination />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import CRUD, { presenter, header, form, crud } from '@crud/crud';
  import rrOperation from '@crud/RR.operation';
  import crudOperation from '@crud/CRUD.operation';
  import pagination from '@crud/Pagination';
  import * as PlanRequest from '@/api/plan';
  import { STOCKS_FORMAT } from '@/utils/stock';

  const defaultForm = {
    code: null,
    name: null,
    createBy: null,
    status: null,
  };

  export default {
    name: 'PlanList',
    components: { pagination, crudOperation, rrOperation },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    props: {
      mode: {
        type: String,
        default: '',
      },
    },
    cruds() {
      return CRUD({
        title: '计划列表',
        url: 'api/plan/all',
        optShow: {
          add: true,
          edit: true,
          del: true,
          reset: true,
        },
        crudMethod: { ...PlanRequest },
      });
    },
    computed: {
      isSelectionMode() {
        // 直接返回待办的
        return this.mode === 'selection';
      },
      permission() {
        return this.isSelectionMode
          ? {
              add: [null],
              edit: [null],
              del: [null],
            }
          : {
              add: ['admin', 'plan:add'],
              edit: ['admin', 'plan:edit'],
              del: ['admin', 'plan:del'],
            };
      },
    },
    dicts: ['plan_status'],
    methods: {
      STOCKS_FORMAT,
      [CRUD.HOOK.afterToAdd]() {
        this.$router.push({
          name: 'PlanProfile',
        });
      },
      [CRUD.HOOK.afterToEdit]() {
        this.$router.push({
          name: 'PlanProfile',
          query: {
            pid: this.crud.selections[0].id,
          },
        });
      },
      /**
       * 数据转格式
       */
      [CRUD.HOOK.afterRefresh]() {
        this.crud.data = this.crud.data.map((data) => {
          return {
            ...data,
            detail: JSON.parse(data.detail),
          };
        });
      },
      addNewProject() {
        this.$router.push({
          name: 'ProjectProfile',
          query: {
            plan_ids: this.crud.selections.map((item) => item.id).join(','),
          },
        });
      },
      copyPlan() {
        this.$router.push({
          name: 'PlanProfile',
          query: {
            pid: this.crud.selections[0].id,
            mode: 'copy',
          },
        });
      },
      addPlans() {
        this.$emit('add-plan', this.crud.selections);
      },
    },
  };
</script>
